<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>5.键盘事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			总结：
				1.Vue中常用的按键别名（牢牢掌握）：
						回车 => enter
						删除 => delete （退格 、 删除 按键）
						退出 => esc
						空格 => space
						换行 => tab （注意“必须配合keydown去使用）
						上 => up
						下 => down
						左 => left
						右 => right
					
				2.如果要绑定的按键，不是上述9个中的，那就如下这么做： —— （很少遇见） 
						第一种：使用event.keyCode去指定具体的按键，例如：@keyup.13去指定回车按键（但不推荐）
						第二种：使用JS中最原始的按键名（event.key）去绑定事件,但有要求：
										① 一个单词组成的直接写，例如：@keyup.Enter
										② 多个单词组成的要变成短杠写法，例如：@keyup.caps-lock

				3.除此之外还有几个特殊的系统修饰键 ——  （几乎不用，了解即可！）
						.ctrl
						.alt
						.shift
						.meta
					他们都有一个特点：必须和其他按键配合使用
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h1>欢迎来到，{{school}}</h1>
			<!-- 下面的9行，都是通过Vue提供的别名，绑定的事件（重点！！） -->
			<input @keyup.enter="showInput" placeholder="按回车键，提示输入"> <br><br>
			<input @keyup.delete="showInput" placeholder="按删除键，提示输入"> <br><br>
			<input @keyup.esc="showInput" placeholder="按esc键，提示输入"> <br><br>
			<input @keyup.space="showInput" placeholder="按空格键，提示输入"> <br><br>
			<input @keydown.tab="showInput" placeholder="按tab键，提示输入"> <br><br>
			<input @keyup.up="showInput" placeholder="按上键，提示输入"> <br><br>
			<input @keyup.down="showInput" placeholder="按下键，提示输入"> <br><br>
			<input @keyup.left="showInput" placeholder="按左键，提示输入"> <br><br>
			<input @keyup.right="showInput" placeholder="按右键，提示输入"> <br><br>
			<hr>
			<!-- 通过JS中的键名(key)绑定事件（了解即可） -->
			<input @keyup.a="showInput" placeholder="按a键，提示输入"> <br><br>
			<input @keyup.Control="showInput" placeholder="按ctrl键，提示输入"> <br><br>

			<!-- 通过JS中的键码(keyCode)绑定事件（了解即可） -->
			<input @keyup.13="showInput" placeholder="按回车键，提示输入"> <br><br>
			<input @keyup.20="showInput" placeholder="按大小写键，提示输入"> <br><br>

			<!-- 通过JS中的键名(key)绑定事件，注意多个单词的写法（了解即可） -->
			<input @keyup.caps-lock="showInput" placeholder="按大小写键，提示输入"> <br><br>
			<hr>
			
			<!-- 特殊的场景：只有在按住 ctrl 的情况下释放a按键，才能触发（了解即可） -->
			<input @keyup.ctrl.w="showInput" placeholder="按???键，提示输入"> <br><br>
			
		</div>
		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					school:'尚硅谷'
				},
				methods:{
					showInput(e){
						alert('你好！')
					}
				}
			})
		</script>
	</body>
</html>